<template>
  <!-- 当日数据 -->
  <h-modal class="event-modal nowDataModal" v-model.lazy="show" title="当日数据" @submit="submit">
    <h-table
      v-if="reload"
      ref="htable"
      @init="getList"
      :config="config"
      :showHeadBgNone="false"
      :zebraStripes="false"
      showRowSelection
      @select="select">
      <span slot="order" slot-scope="{index}">{{ index + 1 }}</span>
      <span slot="textLink" slot-scope="{text}" v-html="formatLink(text)">

      </span>
      <div slot="img" slot-scope="{text}">
        <a v-if="text" :href="text" target="_blank">{{ text }}</a>
      </div>
      <div slot="dutyStatus" slot-scope="{text}">
        {{ text == 1 ? '未上报' : '已上报' }}
      </div>
      <!-- <span slot="action" slot-scope="{record}"><a style="color: #1F3B8A" @click="editScore(record)">编辑</a></span> -->
    </h-table>
  </h-modal>
</template>

<script>
import moment from 'moment';
import { getHistory } from '@/api/serve';
import cloneDeep from 'lodash/cloneDeep';
import { columns } from './columns';
export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    // ids: {
    //   type: [String, Number],
    //   defalut: ''
    // },
    id: {
      type: String,
      defalut: ''
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  computed: {
    formatLink() {
      return function(e) {
        const m = e.match('(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]');
        if (m) {
          e = encodeURIComponent(e).replace(new RegExp(encodeURIComponent(m[0]), 'g'), `<a target="_blank" href="${m[0]}">${m[0]}</a>`);
        }
        return decodeURIComponent(e);
      };
    }
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {
          this.config.columns = columns[this.id];
          this.reload = false;
          this.$nextTick(() => {
            this.reload = true;
          });
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      deptType: '0',
      columns,
      ids: [],
      reload: false,
      config: {
        rowKey: 'id',
        size: 'small',
        bordered: true,
        dataSource: [],
        columns: [],
        pagination: false
      },
      moment,
      show: false,
      deptArr: [],
      dept: [],
      form: {},
      rules: {
        askContent: [{ required: true, message: '请输入' }]
      },
      queryParams: {
        // pageSize: 1000,
        // pageNo: 1
      }
    };
  },
  created() {

  },
  methods: {
    select({ selectedRowKeys }) {
      console.log(selectedRowKeys);
      this.ids = selectedRowKeys;
    },
    getList(params) {
      if (params) {
        Object.assign(this.queryParams, params);
      }
      getHistory({
        ...this.queryParams,
        dutyId: this.id,
        start: moment().format('YYYY-MM-DD'),
        end: moment().format('YYYY-MM-DD')
      }).then(res => {
        this.config.dataSource = res.data.records;
        this.ids = res.data.records.map(e => e.id);
        this.$refs.htable.setSelectedRowKeys(this.ids);
        // this.config.pagination.total = res.data.total;
      });
    },
    edit(formData) {
      this.form = cloneDeep(formData);
    },
    change() {
      this.getList();
    },
    submit() {
      this.show = false;
      this.$emit('submit', this.ids);
    }
  }
};
</script>

<style lang="less">
.nowDataModal {
  th,td {
    font-size: 13px;
  }
}
</style>
